<script setup>
import { computed } from 'vue';

const props = defineProps({
  sector: {
    type: Object,
    required: true,
    // 期望的格式: { name: '科技', change: 1.2, leaders: [{name: '公司A', change: 2.1}, ...], volume: 156.8 }
  }
});

const changeClass = computed(() => {
  return props.sector.change >= 0 
    ? 'text-red-600' 
    : 'text-green-600';
});

const changePrefix = computed(() => {
  return props.sector.change >= 0 ? '+' : '';
});

const formatNumber = (num) => {
  return new Intl.NumberFormat('zh-CN').format(num);
};
</script>

<template>
  <div class="market-sector-card bg-white rounded-lg shadow-sm p-4">
    <div class="flex justify-between items-center mb-3">
      <h3 class="font-medium text-gray-900">{{ sector.name }}</h3>
      <span :class="['font-medium', changeClass]">
        {{ changePrefix }}{{ sector.change }}%
      </span>
    </div>
    
    <div class="space-y-2">
      <div v-for="(leader, index) in sector.leaders.slice(0, 3)" 
           :key="index"
           class="flex justify-between items-center text-sm">
        <span class="text-gray-600">{{ leader.name }}</span>
        <span :class="leader.change >= 0 ? 'text-red-600' : 'text-green-600'">
          {{ leader.change >= 0 ? '+' : '' }}{{ leader.change }}%
        </span>
      </div>
    </div>
    
    <div class="mt-3 pt-3 border-t border-gray-100">
      <div class="flex justify-between text-sm text-gray-500">
        <span>成交额</span>
        <span>{{ formatNumber(sector.volume) }}亿</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.market-sector-card {
  transition: all 0.3s ease;
}

.market-sector-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>